@mixin ellipsis($row: 1) {
  overflow: hidden;
  text-overflow: ellipsis;

  @if $row > 1 {
    display: -webkit-box;
    word-break: break-all;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  } @else {
    white-space: nowrap;
  }
}

@mixin flex-center($direction: row) {
  display: flex;
  flex-direction: $direction;
  align-items: center;
  justify-content: center;
}

@mixin absolute-center() {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@mixin flex-end($direction: row) {
  display: flex;
  flex-direction: $direction;
  align-items: flex-end;
  justify-content: flex-end;
}

@mixin flex-center-end($direction: row) {
  display: flex;
  flex-direction: $direction;
  align-items: center;
  justify-content: flex-end;
}
@mixin flex-space-between($direction: row) {
  display: flex;
  flex-direction: $direction;
  align-items: center;
  justify-content: space-between;
}

@mixin flex-start($direction: row) {
  display: flex;
  flex-direction: $direction;
  align-items: center;
  justify-content: flex-start;
}

@mixin flex-start-start($direction: row) {
  display: flex;
  flex-direction: $direction;
  align-items: flex-start;
  justify-content: flex-start;
}

@mixin flex-start-center($direction: row) {
  display: flex;
  flex-direction: $direction;
  align-items: center;
  justify-content: flex-start;
}
@mixin flex-end-center($direction: row) {
  display: flex;
  flex-direction: $direction;
  align-items: center;
  justify-content: flex-end;
}

@mixin flex-between-center($direction: row) {
  display: flex;
  flex-direction: $direction;
  align-items: flex-start;
  justify-content: space-between;
}

// 用 border 技巧画直角三角形
// 参数：$width = 顶边长度
//       $height = 竖边长度
//       $color = 三角形颜色
//       $corner = 三角形所在角 (tl = 左上, tr = 右上, br = 右下, bl = 左下)
@mixin triangle($width, $height, $color, $corner) {
  width: 0;
  height: 0;

  @if $corner == tl {
    border-top: $height solid $color;
    border-right: $width solid transparent;
  }

  @if $corner == tr {
    border-top: $height solid $color;
    border-left: $width solid transparent;
  }

  @if $corner == br {
    border-bottom: $height solid $color;
    border-left: $width solid transparent;
  }

  @if $corner == bl {
    border-bottom: $height solid $color;
    border-right: $width solid transparent;
  }
}
